var styleElement;
var ribbon = null;
var isInit = false;

var EXT_IMG_PATH = null;
	
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
	if (request.action == "init") {
		init();
	}
	// else if (request.action=='loading') {
	// 	var hostValid = window.location.hostname.match('youtube.com')!=null || window.location.hostname.match('google.com')!=null;
	// 	if(hostValid && $('#overlay-mask').length==0 )
	// 		$('body').append('<div id="overlay-mask"></div>');
	// }
});

function init() {
	
	var hostValid = window.location.hostname.match('youtube.com')!=null || window.location.hostname.match('google.com')!=null;
	
	if (ribbon==null && hostValid ) {
		
		EXT_IMG_PATH = chrome.extension.getURL("images/");
		
		ribbon = 'initialized';
		
		overwritePageStyles();
		
		initRibbonHtml();
		AppSwitcher.init();
		
		insertExtImageUrl();
		initProductSwitch();
		
		var product = window.location.hostname.split('.')[0];
		if(product=='www') {
			product = window.location.hostname.split('.')[1];
		}
		$('html').attr('data-product',product);
		AppSwitcher.highlightDoorway();
		
		// $('#overlay-mask').remove();
	}
}

function initProductSwitch() {
	
	$('#appswitcher #main li').live("click", function(){
		// alert( $(this).attr('data-product') );
		chrome.extension.sendRequest({redirect: $(this).attr('data-product')});
	});
}

function insertExtImageUrl() {
	$('#as-logo').css('background','url('+EXT_IMG_PATH+'ribbon/icons/arrow.png)');
	$('#as-icon-box .glogo').css('background','url('+EXT_IMG_PATH+'ribbon/icons/google-logo-white.png)');
	$('#show-more .logo').css('background','url('+EXT_IMG_PATH+'ribbon/icons/apps.png)');
}

function overwritePageStyles() {
	
	var product = window.location.hostname.split('.')[0];
	if(product=='www') {
		product = window.location.hostname.split('.')[1];
	}
	
	switch(product) {
		case 'mail':
			$('#gbq1').css('top','9px');
			
			$('#gbx3').css('display','none');
			$('#gbzc').css('display','none');
			$('#gb').css('height','62px !important');
	
			$('#canvas_frame').css('height',$(window)[0].innerHeight+42)
		                    .css('width',$(window)[0].innerWidth-56);

			$(window).resize(function() {
				$('#canvas_frame').css('height',this.innerHeight+42)
			                    .css('width',this.innerWidth-56);
			});
			break;
		case 'plus':
			$('#gbzw').css('display','none');
			$('#gbx3').css('display','none');
			$('#gbq').css('top','0');
			$('#gbq1').css('left','60px');
			$('#gbq2').css('margin-left', '280px');
			$('#gbx1').css('height','60px')
			          .css('top','0')
			          .css('left','60px');
			$('#gbu').css('top','-4px');
			$('#main-wrapper').css('padding-left', '60px')
			                  .css('margin-top','-40px');
			$('#left-nav-wrapper').css('padding-left', '106px');
			$('#gbq2').css('padding-top','17px')
			          .css('margin-left','560px');
			$('#gbq3').css('padding-top','17px')
			          .css('margin-left','100px');
			break;
		case 'maps':
			$('#gbzw').css('display','none');
			$('#gbx3').css('display','none');
			$('#gbq').css('top','38px');
			$('#main.cs').css('margin-left','60px')
			             .css('margin-top','-42px');
			$(window).resize(function() {
				$('#main.cs').css('height',this.innerHeight+42)
			               .css('width',this.innerWidth-56);
			});
			break;
		case 'google':
			$('#gbzw').css('display','none');
			$('#gbx3').css('display','none');
			$('#gbu').css('top','0');
			break;
		case 'news':
			$('#gbzw').css('display','none');
			$('#gbx3').css('display','none');
			$('#gbq').css('top','0');
			$('#gbq1').css('left','60px');
			$('#gbq2').css('margin-left', '280px');
			$('#gbx1').css('height','60px')
			          .css('top','0')
			          .css('left','60px');
			$('#gbu').css('top','-4px');
			$('#main-wrapper').css('padding-left', '60px')
			                  .css('margin-top','-40px');
			$('#left-nav-wrapper').css('padding-left', '106px');
			break;
		case 'youtube':
			$('#gbzw').css('display','none');
			$('#gbx3').css('display','none');
			$('#gbu').css('top','0');
			break;

	}
	
	
}

function initRibbonHtml() {
	
	
	
	var dropbox = $('<div id="sortable-dropbox" class="connectedSortable"></div>');
	var appswitcher = $('<div id="appswitcher" class="menu open"></div>');
	var top = $('<div id="top" class="top"></div>');
	var asIconBox = $('<div id="as-icon-box">\
	                     <div id="as-logo" class="as-logo" href="#"></div>\
	                     <div id="logo" class="logo glogo"></div>\
	                   </div>');
	var showMore = $('<div id="show-more">\
	                    <span class="logo"></span>\
	                    <span class="product-name" style="top: 10px; left: 60px;">Apps</span>\
	                  </div>');
	var mainStr = '<ol id="main" class="connectedSortable submenu main" style="margin:9px 0 2px 0;padding:0 10px 0 10px;height:100%;">'+
	                '<li id="new-product" class="product-new" data-product="hangout" style="display:none">'+
	                  '<a href="#hangout">'+
	                    '<span class="icon" style="background: url('+EXT_IMG_PATH+'as-icons/hangout.png) no-repeat;left:18px;"></span>'+
	                    '<span class="product-name" style="display: none; ">Try Hangout</span>'+
	                    '<span class="new-product-icon" style="background: url('+EXT_IMG_PATH+'as-icons/new-property-red.png) no-repeat;top: 8px;left: 17px;width:21px;height:21px;position:absolute;display:none;" ></span>'+
	                  '</a>'+
	                '</li>'+
	              '</ol>';
	
	var more = $('<div id="more" class="more" style="display:none;">\
									<div class="antiscroll-box-wrap antiscroll-wrap">\
										<div class="antiscroll-box">\
											<div class="antiscroll-inner">\
										  	<div class="antiscroll-box-inner">\
								          <div id="flow" class="remaining submenu">\
														<ol id="overflow" class=""></ol>\
											    </div>\
							            <div id="recent" class="remaining submenu">\
														<h2 style="padding-left: 28px;">Recent Products</h2>\
														<ol id="morelist1" class="connectedSortable"></ol>\
										    	</div>\
													<div id="remaining" class="remaining submenu">\
														<h2 style="padding-left: 37px;">All Products</h2>\
														<ol id="morelist" class="connectedSortable"></ol>\
											    </div>\
							          </div>\
							        </div>\
							      </div>\
							    </div>\
							  </div>');

	var main = $(mainStr);

	top.append(asIconBox)
	   .append(showMore)
	   .append(main);

	appswitcher.append(top)
	           .append(more);

	$('body').append(dropbox)
	         .append(appswitcher);
}